<template>
	<view class="content pages">
		<!-- 使用自定义导航栏组件 -->
		<navBar title="我的" bgColor="#156ed2" @getHeadHeight="getHeadHeight" :backIcon="false" path='/pages/my/my' />
		<view class="user-data align-center justify-between bg-primary">
			<image src="../../static/images/user-bg.png" class="user-bg" mode=""></image>
			<view v-if="!userInfo.username" class="user-info">
				<view class="flex align-center">
					<image class="avatar" src="../../static/images/default.png" mode=""></image>
					<text class="nousername border rounded-lg ml-2 text-white p-1" @click="login">立即登录</text>
				</view>
			</view>
			<view v-else class="user-info">
				<view class="flex align-center">
					<image class="avatar" src="../../static/images/avatar.jpg" mode=""></image>
					<text class="username">{{userInfo.username}}</text>
				</view>
			</view>
			<view class="user-card">
				<view class="bar flex pl-4">
					<u-icon slot="icon" size="35" color="#946309" name="integral-fill"></u-icon>
					<text class="ml-2 font-weight-bold">{{userInfo.coin ? userInfo.coin : 0}}</text>
				</view>
				<view class="card-info flex justify-between">
					<view class="name">{{userInfo.class.name ? userInfo.class.name :'登录体验更多功能'}}</view>
					<view class="phone">{{userInfo.phoneNumber ? userInfo.phoneNumber : ''}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<image class="arc" src="../../static/images/arc.png" mode=""></image>
			<view class="set py-2">
				<view class="list-cell">
					<u-cell-group width="100%">
						<u-cell-item @click="editUserInfo" title="个人资料" :arrow="true" arrow-direction="right"></u-cell-item>
						<u-cell-item @click="editPassword" title="修改密码" :arrow="true" arrow-direction="right"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
			<view v-if="userInfo.username" class="list-cell my-4 text-white text-center"
				hover-class="bg-hover-secondary" style="background-color: #0081ff;" @click="logout">
				退出登录
			</view>
		</view>
		<BottomBar :selected='selected'></BottomBar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: [{
						name: 'volume',
						title: '公告'
					},
					{
						name: 'lock',
						title: '评语'
					},
					{
						name: 'chat',
						title: '消息'
					},
					{
						name: 'star',
						title: '收藏'
					},
				],
				selected: 2,
				
				
				
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user
			})
		},
		onShow() {
			this.$store.dispatch('getUserInfo')
			console.log(this.userInfo);
		},
		methods: {
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function(res) {
						that.$store.dispatch('logout').then(res => {
							uni.showToast({
								title: '退出成功',
								icon: 'none'
							});
							setTimeout(() => {
								uni.switchTab({
									url:"../index/index"
								})
							}, 2000);
							
						})
					}
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			editPassword(){
				this.$store.dispatch('authMethod',()=>{
					uni.navigateTo({
						url:('/pages/my/password')
					})
				})
			},
			editUserInfo(){
				this.$store.dispatch('authMethod',()=>{
					uni.navigateTo({
						url:('/pages/my/userinfo')
					})
				})
			},
			// 导航栏高度(单位px)
			getHeadHeight(e) {
				this.HeadNavHeight = e
				console.log(this.HeadNavHeight);
			},
		}
	}
</script>

<style>
	.user-data {
		height: 520rpx;
		padding: 100rpx 30rpx 0;
		position: relative;
	}

	.user-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 60%;
		opacity: 0.84;
	}

	.avatar {
		width: 130rpx;
		height: 130rpx;
		border: 5rpx solid #fff;
		border-radius: 50%;
	}

	.username {
		font-size: 38rpx;
		color: #fff;
		margin-left: 20rpx;
	}

	.nousername {
		font-size: 22rpx;
		padding: 10rpx;
	}

	.user-info {
		height: 220rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		justify-content: space-between;
	}

	.user-card {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: url('../../static/images/class_bg.png');
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
	}

	.bar {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		width: 160rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
		color: #946309;
		border-radius: 20px;
		background: linear-gradient(to left, #f9e6af, #ffd465);
		z-index: 1;
	}

	.card-info {
		width: 360rpx;
		font-size: 25rpx;
		color: #f7d680;
		margin-bottom: 28rpx;
		padding-left: 30px;
	}

	.list {
		transform: translateY(0px);
		transition: 0s;
		margin-top: -100rpx;
		padding: 0 30rpx 20rpx;
		position: relative;
		background-color: #f8f8f8;
		z-index: 1;
	}

	.arc {
		position: absolute;
		left: 0;
		top: -34rpx;
		width: 100%;
		height: 36rpx;

	}

	.list-item {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.item-cell {
		display: flex;
		align-items: baseline;
		padding: 20rpx 30rpx;
		line-height: 60rpx;
		position: relative;
	}

	.list-cell {
		align-items: baseline;
		padding: 20rpx 30rpx;
		line-height: 60rpx;
		position: relative;
		background: #fff;
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
</style>